<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务/医院管理</title>
</head>
<body>
<div id="content">
    <!--provider info modal-->
    <div class="modal fade" id="provider-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ showing_name }}</b> 的信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group-sm">
                        <h6 class="text-info">名字</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="provider.name" placeholder="请输入名字">
                        <h6 class="text-info">描述</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="provider.description" placeholder="请输入描述">
                        <h6 class="text-info">城市</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="provider.city" placeholder="请输入所在城市">
                        <h6 class="text-info">位置</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="provider.location" placeholder="请输入位置">
                        <h6 class="text-info">提供服务</h6>
                        <div v-for="business in businesses" :key="business.id" style="display: inline-block;">
                            <button :class="['btn', business_button_class(business.id)]" @Click="check_business(business.id, $event)">
                                {{ business.name }}
                            </button>
                        </div>
                        <h6 class="text-info">位置</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="provider.phoneNumber" placeholder="请输入 11 位号码">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!fields_empty & update_button_show" @Click="create">{{ update_or_create }}</button>
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="updating" @Click="deleteIt">删除</button>
                        <span class="text-danger">&emsp;{{ errorMessage }}</span>
                        <span class="text-primary">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>



    <div id="provider-data-box">
        <h3 class="text-secondary">服务提供商清单<button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                                                 data-toggle="modal" data-target="#provider-info" @Click="render_modal_box(-1)"><i class="fa fa-plus-square fa-2x"></i></button></h3>
        <div class="table-responsive">
            <table class="table table-light table-striped table-sm text-center">
                <thead class="thead-dark">
                <tr>
                    <th>名称</th>
                    <th>城市</th>
                    <th>位置</th>
                    <th class="text-primary">进入详情页执行操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="provider in providers" :key="provider.id">
                    <td>{{ provider.name }}</td>
                    <td>{{ provider.city }}</td>
                    <td>{{ provider.location }}</td>
                    <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                data-target="#provider-info" @Click="render_modal_box(provider.id)">进入详情</button></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--search box-->
        <div class="form-inline">
            <div class="input-group-sm">
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index-1)">上一页</button>
                第{{page_index}}页，共{{page_num}}页
                <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(page_index+1)">下一页</button>
                <kbd>To</kbd>：
                <input type="text" class="form-control" style="width: 3rem;" v-model="go">
                <button class="btn btn-link border-0 btn-info"  @Click="get_paging_data(go)">Go</button>
                <kbd>检索</kbd>
                &ensp;城市&ensp;
                <input type="text" class="form-control text-info" style="width: 6rem;" v-model="pointed_city">
                &ensp;服务&ensp;
                <select class="form-control option" v-model="pointed_business_id">
                    <option v-for="business in businesses" :value="business.id">
                        {{ business.name }}
                    </option>
                </select>
            </div>
            <button class="btn btn-link border-0 btn-secondary" @Click="get_paging_data(0)">搜索</button>
            <button class="btn btn-link border-0 btn-secondary" @Click="reset_search">重置</button>
        </div>
    </div>



</div>
<div id="content2">
    <!--business info modal-->
    <div class="modal fade" id="business-info">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title"><b class="text-primary">{{ showing_name }}</b> 服务信息</h3>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="input-group-sm">
                        <h6 class="text-info">名字</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="business.name" placeholder="请输入名字">
                        <h6 class="text-info">简述</h6>
                        <input type="text" class="form-control" style="width: 90%;" v-model="business.summary" placeholder="请输入简述">
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="!fields_empty & update_button_show" @Click="create">{{ update_or_create }}</button>
                        <button class="btn btn-lg btn-link border-0 btn-secondary" v-show="updating" @Click="deleteIt">删除</button>
                        <span class="text-primary">&emsp;{{ message }}</span>
                    </div>
                </div>
                <div class="modal-footer">
                    @宠物之家
                </div>
            </div>
        </div>
    </div>

    <div id="business-data-box">
        <h3 class="text-secondary">服务清单<button class="btn btn-sm btn-link border-0 btn-primary float-sm-right"
                                               data-toggle="modal" data-target="#business-info"
                                               @Click="render_modal_box(-1)"><i class="fa fa-plus-square fa-2x"></i></button></h3>
        <div class="table-responsive">
            <table class="table table-light table-striped table-sm text-center">
                <thead class="thead-dark">
                <tr>
                    <th>名称</th>
                    <th>简述</th>
                    <th class="text-primary">进入详情页执行操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="s in businesses" :key="s.id">
                    <td>{{ s.name }}</td>
                    <td>{{ s.summary }}</td>
                    <td><button class="btn btn-sm btn-link border-0 btn-secondary" data-toggle="modal"
                                data-target="#business-info" @Click="render_modal_box(s.id)">进入详情</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>